<template>
  <el-drawer
    :title="whoIsIt === 'add'?'添加文章':'编辑文章'"
    :visible.sync="drawer"
    :direction="direction"
    size="100%"
  >
    <el-form ref="form" :model="form" label-width="80px" style="padding: 5px 20px;display: flex">
      <div style="width: 30%;">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type_id" placeholder="请选择文章类型">
            <el-option label="Vue" value="1"></el-option>
            <el-option label="Javascript" value="2"></el-option>
            <el-option label="UI组件" value="3"></el-option>
            <el-option label="Node" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否原创">
          <el-radio-group v-model="form.original">
            <el-radio label="原创"></el-radio>
            <el-radio label="转载"></el-radio>
            <el-radio label="翻译"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onAdd" v-if="whoIsIt==='add'?true:false">添加新文章</el-button>
          <el-button type="primary" @click="onEdit" v-if="whoIsIt==='edit'?true:false">提交编辑</el-button>
          <el-button @click="drawer = false">取消</el-button>
        </el-form-item>
      </div>
      <el-form-item label="编辑文章">
        <quill-editor
          v-model="form.content"
          ref="myQuillEditor"
          :options="editorOption"
          style="height: 100vh;"
        >
        </quill-editor>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
        whoIsIt: "",
        form: {
          title: '',
          type_id: '',
          original: '',
          content: '<h2>I am Example</h2>'
        },
        articleId: null,
        editorOption: { /* quill options */}
      };
    },
    /*created() {
      this.isEdit();
    },*/
    methods: {
      openDrawerS(data, id) {
        this.drawer = true;
        this.whoIsIt = data;
        console.log(id);
        // this.articleId = id;
        this.isEdit(id);
      },
      isEdit(id) {
        if (this.whoIsIt === "edit") {
          this.getAxios("/article/getid?id=" + id).then(res => {
            this.form = res.list[0]
          }).catch(err => {
            console.log(err);
          })
        }
      },
      onAdd() {
        this.postAxios('/article/add', {
          title: this.form.title,
          type_id: this.form.type_id,
          original: this.form.original,
          content: this.form.content
        }).then(res => {
          this.$message({
            message:res.msg,
            type:'success'
          });
          this.drawer = false;
          this.$parent.getArticleList();
        }).catch(err => {
          console.log(err);
        })
      },
      onEdit() {
        this.drawer = false;
      }
    }
  };
</script>

<style scoped>

</style>